<template>
  <div id="goods">
    <van-sidebar v-model="active" id="goods-leftTab">
      <van-sidebar-item
        :title="item"
        v-for="(item, index) in sidebarData"
        :key="index"
        :badge="index + 1"
      />
    </van-sidebar>

    <div id="goods-rightTabContent">
      <div class="title">热销榜</div>
      <div class="goods-scroll">
        <van-card
          price="6.6"
          desc="啊白菜的味道！！"
          title="清炒小白菜"
          :thumb="myImage2"
        >
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>

        <van-card
          price="16.6"
          desc="什么酸酸甜甜我们都爱？"
          title="西红柿炒鸡蛋"
          :thumb="myImage3"
        >
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>
        <van-card price="16.6" desc="1+1=3" title="三杯鸡" :thumb="myImage1">
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>
        <van-card
          price="86.6"
          desc="辣辣辣辣辣！！"
          title="三养火鸡面"
          :thumb="myImage4"
        >
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>
        <van-card
          price="86.6"
          desc="辣辣辣辣辣！！"
          title="魔鬼辣椒"
          :thumb="myImage5"
        >
          <template #footer>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import myImage1 from "@/assets/1.png";
import myImage2 from "@/assets/2.png";
import myImage3 from "@/assets/3.png";
import myImage4 from "@/assets/4.png";
import myImage5 from "@/assets/5.png";
import { reactive } from "vue";
const sidebarData = reactive([
  "热销榜",
  "新品专享",
  "鲜炒盖饭",
  "炒饭系列",
  "千万销量",
  "收藏门店",
  "营养适配",
  "满减专区",
  "撸烤串",
  "套餐自选区",
]);
</script>

<style lang="less" scoped>
#goods {
  height: 100%;
  display: flex;
  #goods-leftTab {
    width: 30%;
    height: 100%;
    :deep(.van-sidebar-item) {
      border: 1px solid #f1f1f1;
      font-size: 12px;
      padding: 13px;
      height: 45px;
      .van-badge--top-right {
        transform: translate(90%, -40%);
      }
      .van-badge {
        font-size: 10px;
      }
    }
  }

  #goods-rightTabContent {
    width: 70%;

    background: red;
    overflow-y: auto;
    background-color: #f4f4f4;
    .title {
      font-size: 12.5px;
      padding: 10px 0 10px 10px;
    }
    :deep(.van-card) {
      margin-bottom: 4px;
      background-color: #fff;
      margin-top: 0;
      padding: 10px;
      box-sizing: border-box;
      height: 85px;
      .van-card__title {
        font-size: 13px;
      }

      .van-card__desc {
        font-size: 11px !important;
        margin-top: 2px !important;
      }
      .van-card__desc {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
      .van-card__thumb {
        width: 60px;
        height: 60px;
      }

      .van-card__bottom {
        // line-height: 50px;
        position: absolute;
        left: 0px;
        top: 38px;

        .van-card__price > div {
          color: red;
        }
      }
      .van-card__footer {
        font-size: 18px;
        position: absolute;
        right: 10px;
        top: 60px;
        background: rgb(255, 217, 0);
        width: 17px;
        text-align: center;
        height: 17px;
        line-height: 19px;
        border-radius: 50%;
      }
    }
  }
}
</style>
